<template>
  <view>
    <!-- 固定在顶部的 Header -->
    <view class="header-container">
      <Header title="牲畜详情">
        <!-- 绑定点击事件到箭头图标 -->
        <uv-icon name="arrow-left" size="18" color="#000" @click="leftClick"></uv-icon>
      </Header>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 图片展示 -->
      <view class="image-container">
        <image :src="img" class="animal-image"></image>
      </view>
      
      <!-- 牲畜编号 -->
      <view class="info-title">
        <text class="title-text">牲畜编号</text>
        <view class="status">
          <view class="status1">{{ healthStatus }}</view>
          <!-- 右箭头图标 -->
          <uv-icon name="arrow-right" color="#ebebeb" size="28"></uv-icon>
        </view>
      </view>
      
      <!-- 信息标题列表0 -->
      <info-title-list :infoTitleList="animalInfoList0"></info-title-list>
      <!-- 设备信息 -->
      <device-info :deviceInfoList="animalInfoList1"></device-info>
      <!-- 信息标题列表 -->
      <info-title-list :infoTitleList="animalInfoList"></info-title-list>
      <!-- 牲畜信息 -->
      <animal-info :animalInfo="animalInfoList2"></animal-info>
      
      <!-- 底部按钮 -->
      <button class="trace-button" @click="goToTrace">溯源信息</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCattleDetail } from '@/api/livestock';
import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
import DeviceInfo from '@/components/Animals/DeviceInfo.vue';
import AnimalInfo from '@/components/Animals/AnimalInfo.vue';
import img from '/static/imgs/raw.png';
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';
import Header from '@/components/AppHeader/Header.vue';

// 定义数据
const healthStatus = ref('偏瘦');
const cattleDetailData = ref(null);

// 获取 Storage 中的 F_Id
const getFIdFromStorage = () => {
  const fId = uni.getStorageSync('F_Id');
  console.log('从 Storage 获取的 F_Id:', fId);
  return fId || null;
};

// 获取牲畜详细信息
const fetchCattleDetail = async () => {
  const fId = getFIdFromStorage();
  if (!fId) {
    console.error('F_Id 不存在，无法获取牲畜详细信息');
    return;
  }

  try {
    // 确保参数正确传递
    const response = await getCattleDetail({ id: fId });
    console.log('获取到的牲畜详细信息:', response);

    if (response.code === 200) {
      cattleDetailData.value = response.data;
      // 更新界面数据
      updateUIWithData(response.data);
    } else {
      console.error('获取牲畜详细信息失败:', response.msg);
    }
  } catch (error) {
    console.error('获取牲畜详细信息时发生错误:', error);
  }
};


// 使用获取到的数据更新界面
const updateUIWithData = (data) => {
  // 更新设备信息
  animalInfoList1.value = [
    {
      title: '智能耳标',
      type: data.eartag ? `IMEI ${data.eartag[0]?.F_IMEI}` : '无数据',
      battery: data.eartag ? `${data.eartag[0]?.F_Quantity}%` : '无数据'
    },
    {
      title: '智能项圈',
      type: data.necklace && data.necklace.length > 0 ? `IMEI ${data.necklace[0]?.F_IMEI}` : '无数据',
      battery: data.necklace && data.necklace.length > 0 ? `${data.necklace[0]?.F_Quantity}%` : '无数据'
    }
  ];

  // 更新牲畜信息
  animalInfoList2.value = [
    {
      title: '牲畜种类',
      type: data.cowinfo[0]?.type
    },
    {
      title: '品种',
      type: data.cowinfo[0]?.F_Type_Id
    },
    {
      title: '性别',
      type: data.cowinfo[0]?.F_Sex === 1 ? '公' : '母'
    },
    {
      title: '出生日期',
      type: new Date(data.cowinfo[0]?.F_Birthday).toLocaleDateString()
    },
    {
      title: '出生体重',
      type: `${data.cowinfo[0]?.F_Csweight}KG`
    },
    {
      title: '年龄',
      type: data.cowinfo[0]?.brithday
    },
    {
      title: '当前体重',
      type: `${data.cowinfo[0]?.F_Weight}KG`
    },
    {
      title: '当前状态',
      type: data.cowinfo[0]?.F_State === 1 ? '异常' : '健康'
    }
  ];

  // 更新健康状态
  const healthStatusMap = {
    1: '正常',
    2: '偏胖',
    3: '偏瘦'
  };
  healthStatus.value = healthStatusMap[data.cowinfo[0]?.tzzb] || '未知状态';
};

// 信息标题列表数据
const animalInfoList0 = ref([
  {
    title: '设备信息'
  }
]);

const animalInfoList = ref([
  {
    title: '牲畜信息'
  }
]);

// 设备信息数据
const animalInfoList1 = ref([
  {
    title: '智能耳标',
    type: 'IMEI 123456789',
    battery: '80%'
  },
  {
    title: '智能项圈',
    type: 'IMEI 123456789',
    battery: '1%'
  }
]);

// 牲畜信息数据
const animalInfoList2 = ref([
  {
    title: '牲畜种类',
    type: '牛'
  },
  {
    title: '品种',
    type: '小黄牛'
  },
  {
    title: '性别',
    type: '公'
  },
  {
    title: '出生日期',
    type: '2024-01-24'
  },
  {
    title: '出生体重',
    type: '10KG'
  },
  {
    title: '年龄',
    type: '5岁两个月'
  },
  {
    title: '当前体重',
    type: '900KG'
  },
  {
    title: '当前状态',
    type: '生长中'
  }
]);

// 返回按钮点击事件
const leftClick = () => {
  uni.navigateBack();
};

// 前往追踪页面
const goToTrace = () => {
  uni.navigateTo({
    url: '/pages/livestock/traceability/Trapages'
  });
};

// 页面加载时获取牲畜详细信息
onMounted(() => {
  fetchCattleDetail();
});
</script>

<style lang="scss" scoped>
// 固定在顶部的 Header 样式
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 100;
}

// 内容区域样式
.content-container {
  margin-top: 100rpx; // 根据 Header 的高度调整
}

.image-container {
  width: 100%;
  height: 700rpx;
}

.animal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  font-size: 36rpx;
  font-weight: bold;
  padding: 0rpx 20rpx;
  margin-bottom: 20rpx;
}

.status {
  color: #ff6b6b;
  display: flex;
}

.arrow {
  margin-left: 10rpx;
}

.trace-button {
  width: 100%;
  padding: 10rpx;
  background-color: #2ecc71;
  color: white;
  border: none;
  font-size: 40rpx;
  margin-top: 30rpx;
}

.null {
  height: 20rpx;
}
</style>